<template>
  <a-form
    ref="formRef"
    :model="formData.data"
    :label-col="labelCol"
    :rules="rules"
  >
    <a-row>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.abbreviations')">
          <a-input
            v-model:value="formData.data.schUniversityAbbreviation"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <!-- <a-col :span="8">
        <a-form-item
          :label="t('school-manage.label.chineseName')"
          name="schoolCnName"
        >
          <a-input
            v-model:value="formData.data.schoolCnName"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col> -->
      <a-col :span="8">
        <a-form-item
          :label="t('school-manage.label.englishName')"
          name="schoolEnName"
        >
          <a-input
            v-model:value="formData.data.schoolEnName"
            placeholder="请输入"
            @blur="handleBlur"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          label="编码"
          name="code"
        >
          <a-input
            readonly
            v-model:value="formData.data.code"
            placeholder="自动生成"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.nature')" name="schNature">
          <a-select
            v-model:value="formData.data.schNature"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.SCH_NATURE]"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.head')">
          <a-input
            v-model:value="formData.data.schResponsiblePersonName"
            placeholder="请选择"
            readonly="readonly"
            @click="openModal"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item
          :label="t('school-manage.label.category')"
          name="schCategory"
          :auto-link="false"
        >
          <div class="box-ver-hor-between w-100p">
            <a-select
              v-model:value="formData.data.schCategory"
              placeholder="请选择"
            >
              <a-select-option
                v-for="item in dictLists.data[dictEnum.SCH_TYPE]"
                :key="item.value"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
            <a-input
              v-if="Number(formData.data.schCategory) === 2"
              v-model:value="formData.data.schCategoryOther"
              placeholder="请输入"
              class="ml-5p"
            />
          </div>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.websiteAddress')">
          <a-input
            v-model:value="formData.data.schOfficialWebsiteAddress"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.educationSystem')">
          <a-select
            v-model:value="formData.data.schSchoolSystem"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.SCH_SYSTEM]"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.star')">
          <a-select
            v-model:value="formData.data.schStar"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.STAR_XJ]"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <!-- 请选择国家 -->
      <a-col :span="8">
        <a-form-item
          :label="t('school-manage.label.country')"
          name="schCountry"
        >
          <a-select
            v-model:value="formData.data.schCountry"
            placeholder="请选择"
            @change="handleCountry"
          >
            <a-select-option
              v-for="item in dictLists.countryData"
              :key="item.id"
              :value="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.province')">
          <!-- <a-input
            v-model:value="formData.data.schProvince"
            placeholder="请输入"
          /> -->
          <a-select
            v-model:value="formData.data.schProvince"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.provinceList"
              :key="item.id"
              :value="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.city')">
          <a-input v-model:value="formData.data.schCity" placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.street')">
          <a-input
            v-model:value="formData.data.schStreet"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.email')">
          <a-input
            v-model:value="formData.data.schMailbox"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.studentCount')">
          <a-input
            v-model:value="formData.data.schStuNumber"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.internationStudentCount')">
          <a-input
            v-model:value="formData.data.schInternationalStuNumber"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.tuitionFee')">
          <a-input
            v-model:value="formData.data.schTuition"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.isCooperation')">
          <a-select
            v-model:value="formData.data.schCompetitorYesno"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.YES_OR_NO]"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8" v-if="Number(formData.data.schCompetitorYesno) === 1">
        <a-form-item :label="t('school-manage.label.competitorDetail')">
          <a-input
            v-model:value="formData.data.schCompetitorDetails"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.intentionProject')">
          <a-select
            mode="multiple"
            v-model:value="formData.data.schIntendedProject"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.Intention_PROJECT]"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.isOnlineClass')">
          <a-select
            mode="multiple"
            v-model:value="formData.data.schOnlineYesno"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.WKQK]"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.rank')">
          <a-input
            v-model:value="formData.data.schRanking"
            placeholder="请输入"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.followProgress')">
          <a-select
            v-model:value="formData.data.schFollowUpProgress"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.FOLLOW_PROGRESS]"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.startCooperationTime')">
          <a-date-picker
            v-model:value="formData.data.schStartCooperationTime"
            valueFormat="yyyy-MM-DD"
            type="date"
            class="w-100p"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.schEndCooperationTime')">
          <a-date-picker
            v-model:value="formData.data.schEndCooperationTime"
            valueFormat="yyyy-MM-DD"
            type="date"
            class="w-100p"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.setUpTime')">
          <a-date-picker
            v-model:value="formData.data.schEstablishmentTime"
            valueFormat="yyyy-MM-DD"
            type="date"
            mode="year"
            class="w-100p"
            format="YYYY"
            :open="formData.openDate"
            @focus="dateFocus"
            @panelChange="panelChange"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :label="t('school-manage.label.qualification')">
          <a-select
            v-model:value="formData.data.qualification"
            mode="multiple"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in dictLists.data[dictEnum.SHC_QUALIFICATION]"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.tuitionFeeDetail')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.schTuitionFees"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.cooperationCollege')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.schCooperationCollege"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.openProfession')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.schOpenMajor"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.costSettlementConditions')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.schExpenseSettlementConditions"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.courseCatalog')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.schCourseCatalog"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.infoblank')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.tuitionInformationLink"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.schoolblank')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.calendarLink"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item
          :label="t('school-manage.label.marketDetail')"
          :label-col="{ span: 3 }"
        >
          <a-textarea
            v-model:value="formData.data.schMarketDetails"
            placeholder="请输入"
            :rows="textareaRows"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
  <BasicTableModal
    v-model:visible="modalConfig.show"
    :columns="modalConfig.columns"
    :fetchAjax="page"
    title="负责人"
    :isinput="true"
    @selectUniversity="selectPerson"
  />
</template>

<script setup>
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import { page } from "@/api/module/user";
import { defineExpose, reactive, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import dictEnum from "@/const/dict";
import BasicTableModal from "@/component/basic-table-modal";
import { getCountry, getSchoolEnName } from '@/api/module/school'
import moment from 'moment'
import { message } from "ant-design-vue";

const textareaRows = 3;
const labelCol = { span: 9 };
const formRef = ref(null);
const formData = reactive({
  data: {},
  openDate: false
});
const modalConfig = reactive({
  show: false,
  columns: [
    { dataIndex: "nickname", key: "nickname", title: "用户名称" },
    { dataIndex: "deptName", key: "deptName", title: "所属部门" },
    { dataIndex: "postName", key: "postName", title: "职位" }
  ]
});

const { t } = useI18n();

const openModal = () => {
  modalConfig.show = true;
};

const selectPerson = record => {
  formData.data.schResponsiblePersonName = record.nickname;
  formData.data.schResponsiblePerson = record.id;
};

const categoryValidator = () => {
  if (
    formData.data.schCategory === null ||
    formData.data.schCategory === undefined
  ) {
    return Promise.reject("请选择类别");
  }

  if (
    formData.data.schCategory === 1 &&
    (formData.data.otherCategory === null ||
      formData.data.otherCategory === undefined ||
      formData.data.otherCategory.length === 0)
  ) {
    return Promise.reject("请输入其他类别");
  }

  return Promise.resolve();
};

const rules = {
  // schUniversityAbbreviation: [{ required: true, message: "请输入大学缩写", trigger: "change" }],
  schoolCnName: [{ required: true, message: "请输入学校中文名", trigger: "change" }],
  schoolEnName: [{ required: true, message: "请输入学校英文名", trigger: "change" }],
  schNature: [{ required: true, message: "请选择性质", trigger: "change" }],
  schCountry: [{ required: true, message: "请输入所属国家", trigger: "change" }],
  schCategory: [{ required: true, validator: categoryValidator }]
};

const handleBlur = async (e) => {
  let respose = await getSchoolEnName({schoolEnName: formData.data.schoolEnName||'' })
  const { success, msg } = respose
  if (!success) {
    message.warning(msg)
  }
}

const panelChange = (date) => {
  formData.openDate = false
  formData.data.schEstablishmentTime = moment(date._d).format('YYYY-MM-DD')
}

const dateFocus = (date) => {
  formData.openDate = true
}

const submit = () => {
  return new Promise(resolve => {
    formRef.value.validate().then(() => {
      resolve({ modelForm: formData.data });
    }).catch(err => {
      console.log('err: ', err);
      resolve({...err, modelForm: formData.data })
    });
  });
};
const handleCountry = (value) => {
  if (value) {
    const obj = dictLists.countryData.find(item => item.name == value)
    dictLists.provinceList = obj ? dictLists.provinceData[obj.id] : []
    formData.data.schProvince = ''
  }
}

const dictLists = reactive({
  data: {},
  code: [
    dictEnum.YES_OR_NO,
    dictEnum.SCH_TYPE,
    dictEnum.SCH_SYSTEM,
    dictEnum.FOLLOW_PROGRESS,
    dictEnum.SCH_NATURE,
    dictEnum.Intention_PROJECT,
    dictEnum.STAR_XJ,
    dictEnum.WKQK,
    dictEnum.SHC_QUALIFICATION,
  ],
  countryData:[],
  provinceData:{},
  provinceList:[],
});
onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj(dictLists.code);
  const res = await getCountry({})
  dictLists.countryData = res.data.filter(item => item.parent == 0)
  dictLists.provinceData = dictLists.countryData.reduce((obj, item) => {
    // eslint-disable-next-line no-prototype-builtins
    obj.hasOwnProperty(item.id)
      ? obj[item.id].push(item.child)
      : obj[item.id] = item.child || []
    return obj
  }, {})
  const obj = dictLists.countryData.find(item => item.name == formData.data.schCountry)
  dictLists.provinceList = obj ? dictLists.provinceData[obj.id] : []
});

const updateFormData = data => {
  data.schStartCooperationTime = data.schStartCooperationTime
            ? moment(data.schStartCooperationTime).format('YYYY-MM-DD')
            : ''
  data.schEndCooperationTime = data.schEndCooperationTime
            ? moment(data.schEndCooperationTime).format('YYYY-MM-DD')
            : ''
  data.schEstablishmentTime = data.schEstablishmentTime
            ? moment(data.schEstablishmentTime).format('YYYY-MM-DD')
            : ''
  formData.data = data;
};

defineExpose({
  submit,
  updateFormData
});
</script>
